<template>
  <el-dialog 
    title="测点选择" 
    :visible.sync="dialogVisible" 
    width="1200px"
    :before-close="handleCancelList1" 
    v-dialogDrag
    class="point-select-dialog"
    custom-class="custom-point-dialog"
  >
    <div class="dialog-container">
      <!-- 左侧树形结构 -->
      <div class="left-panel">
        <div class="panel-header">
          <div class="header-content">
            <i class="el-icon-s-platform"></i>
            <span>测点列表</span>
            <el-tooltip content="刷新测点列表" placement="top">
              <el-button 
                icon="el-icon-refresh" 
                circle 
                size="mini" 
                class="refresh-btn"
                @click="refreshPointList"
              ></el-button>
            </el-tooltip>
          </div>
          <el-input
            v-model="searchText"
            placeholder="搜索测点..."
            prefix-icon="el-icon-search"
            size="small"
            clearable
            class="search-input"
          />
        </div>
        <div class="tree-wrapper">
          <el-tree 
            :data="filteredPointTreeList" 
            ref="treePoint"
            node-key="id" 
            highlight-current
            :props="{label: 'lable'}"
            class="custom-tree"
            :filter-node-method="filterNode"
            default-expand-all
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <div class="node-content">
                <i class="el-icon-location-outline node-icon"></i>
                <span class="node-label">{{ data.lable }}</span>
                <el-tag v-if="isPointConfigured(data)" size="mini" type="success" effect="plain">
                  已配置
                </el-tag>
              </div>
              <el-tooltip content="添加配置" placement="top">
                <el-button 
                  icon="el-icon-plus" 
                  @click="handlePointAddTag(data)"
                  circle
                  size="mini"
                  class="add-button"
                  :disabled="isPointConfigured(data)"
                ></el-button>
              </el-tooltip>
            </div>
          </el-tree>
        </div>
      </div>

      <!-- 右侧配置面板 -->
      <div class="right-panel">
        <div class="panel-header">
          <div class="header-content">
            <i class="el-icon-setting"></i>
            <span>测点配置</span>
            <span class="tab-count">({{ dialogData1.length }}/10)</span>
          </div>
          <el-tooltip content="清除所有配置" placement="top">
            <el-button 
              icon="el-icon-delete" 
              size="mini" 
              :disabled="dialogData1.length === 0"
              @click="clearAllConfigs"
            >清空</el-button>
          </el-tooltip>
        </div>
        
        <div class="tabs-container" v-if="dialogData1.length > 0">
          <el-tabs 
            v-model="dialogDataValue1" 
            type="card" 
            closable 
            @tab-remove="removeDialogTab1" 
            @tab-click="handlePointTreeClick"
            class="config-tabs"
            editable
            @edit="handleTabsEdit"
          >
            <el-tab-pane
              v-for="(item, index) in dialogData1"
              :key="item.linK_POINT_NAME + index"
              :label="generateTabLabel(item)"
              :name="item.linK_POINT_NAME"
            >
              <div class="tab-content">
                <div class="tab-header">
                  <h4>{{ item.linK_POINT_NAME }} - 配置详情</h4>
                  <el-tag :type="getConfigStatusType(item)" size="small">
                    {{ getConfigStatusText(item) }}
                  </el-tag>
                </div>
                
                <el-form :model="item" label-width="120px" ref="listForm1" class="config-form">
                  <!-- 分量选择 -->
                  <el-form-item label="分量：" required prop="comp" class="form-item">
                    <el-select 
                      v-model="item.comp" 
                      placeholder="请选择分量"
                      class="form-select"
                      @change="handleCompChange(item)"
                    >
                      <el-option
                        v-for="opt in compList"
                        :key="opt.comp"
                        :label="opt.compName"
                        :value="opt.comp"
                      >
                        <span class="option-label">{{ opt.compName }}</span>
                        <span class="option-desc">{{ opt.desc || '暂无描述' }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <!-- 复选框 -->
                  <el-form-item label="" class="form-item checkbox-item">
                    <el-checkbox 
                      v-model="item.cannul" 
                      :true-label="1" 
                      :false-label="0"
                      class="custom-checkbox"
                      @change="handleCannulChange(item)"
                    >
                      <span class="checkbox-label">为空时允许数据替换</span>
                      <el-tooltip content="启用后，当数据为空时允许使用默认值替换" placement="top">
                        <i class="el-icon-question help-icon"></i>
                      </el-tooltip>
                    </el-checkbox>
                  </el-form-item>

                  <!-- 数据范围 -->
                  <el-form-item label="数据最长范围：" required class="form-item">
                    <el-input-number
                      v-model="item.duration" 
                      placeholder="请输入天数" 
                      :disabled="item.cannul == 0" 
                      :min="1"
                      :max="365"
                      controls-position="right"
                      class="duration-input"
                    >
                      <template slot="append">天</template>
                    </el-input-number>
                    <div class="input-tip" v-if="item.cannul == 0">
                      <i class="el-icon-info"></i>
                      请先启用"为空时允许数据替换"
                    </div>
                  </el-form-item>

                  <!-- 多测值取值 -->
                  <el-form-item label="多测值取值：" required class="form-item value-type-item">
                    <el-radio-group v-model="item.valuetype" @change="handleValueTypeChange(item)">
                      <el-radio-button :label="0">固定时刻</el-radio-button>
                      <el-radio-button :label="1">平均值</el-radio-button>
                      <el-radio-button :label="2">最大值</el-radio-button>
                      <el-radio-button :label="3">最小值</el-radio-button>
                    </el-radio-group>

                    <transition name="el-fade-in">
                      <div class="moment-section" v-if="item.valuetype === 0">
                        <div class="moment-input-group">
                          <label>选择时刻：</label>
                          <el-slider
                            v-model="item.moment"
                            :min="0"
                            :max="23"
                            :step="1"
                            show-stops
                            :show-tooltip="true"
                            class="time-slider"
                          ></el-slider>
                          <span class="time-display">{{ item.moment }}:00</span>
                        </div>
                        <p class="input-tip">
                          <i class="el-icon-info"></i>
                          请输入时刻，范围是0~23
                        </p>
                      </div>
                    </transition>
                  </el-form-item>
                </el-form>
                
                <div class="form-actions">
                  <el-button 
                    icon="el-icon-delete" 
                    size="small" 
                    @click="removeCurrentTab(item)"
                  >删除配置</el-button>
                  <el-button 
                    icon="el-icon-check" 
                    type="success" 
                    size="small"
                    @click="validateConfig(item)"
                  >验证配置</el-button>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-state">
          <div class="empty-content">
            <div class="empty-icon-wrapper">
              <i class="el-icon-document-remove"></i>
            </div>
            <h3>暂无测点配置</h3>
            <p>请从左侧选择测点进行配置，最多可配置10个测点</p>
            <el-button 
              icon="el-icon-plus" 
              type="primary" 
              size="small"
              @click="focusOnSearch"
            >开始配置</el-button>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <div class="footer-left">
        <el-tooltip content="导出当前配置" placement="top">
          <el-button icon="el-icon-download" size="small">导出</el-button>
        </el-tooltip>
        <el-tooltip content="导入配置" placement="top">
          <el-button icon="el-icon-upload" size="small">导入</el-button>
        </el-tooltip>
      </div>
      <div class="footer-right">
        <el-button @click="handleCancelList1" size="medium" class="cancel-btn">
          <i class="el-icon-close"></i>取消
        </el-button>
        <el-button 
          type="primary" 
          @click="handleSaveList1" 
          size="medium" 
          class="save-btn"
          :loading="saving"
          :disabled="dialogData1.length === 0"
        >
          <i class="el-icon-check"></i>保存配置 ({{ dialogData1.length }})
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.point-select-dialog {
  ::v-deep .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  }

  ::v-deep .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 24px;
    border-bottom: none;
    
    .el-dialog__title {
      color: white;
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 0.5px;
    }
    
    .el-dialog__headerbtn {
      top: 20px;
      
      .el-dialog__close {
        color: white;
        font-size: 18px;
        
        &:hover {
          color: #f0f0f0;
          transform: rotate(90deg);
          transition: transform 0.3s ease;
        }
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0;
    height: 600px;
  }
}

.dialog-container {
  display: flex;
  height: 100%;
  background: white;
}

// 左侧面板样式
.left-panel {
  width: 320px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 20px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #2d3748;
  
  i {
    color: #667eea;
    font-size: 18px;
  }
  
  .refresh-btn {
    margin-left: auto;
  }
}

.search-input {
  ::v-deep .el-input__inner {
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    
    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }
  }
}

.tree-wrapper {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.custom-tree {
  ::v-deep .el-tree-node {
    margin: 6px 0;
    
    &:focus > .el-tree-node__content {
      background: linear-gradient(135deg, #ebf4ff 0%, #e6fffa 100%);
    }
    
    &.is-current > .el-tree-node__content {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      
      .node-icon, .add-button {
        color: white;
      }
    }
  }
  
  ::v-deep .el-tree-node__content {
    height: 48px;
    border-radius: 12px;
    margin: 4px 0;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f1f5f9;
      transform: translateX(4px);
    }
  }
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 12px;
}

.node-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.node-icon {
  color: #667eea;
  font-size: 16px;
  flex-shrink: 0;
}

.node-label {
  font-size: 14px;
  color: #4a5568;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 8px;
  transition: all 0.3s ease;
  
  &:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  &:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
  }
}

// 右侧面板样式
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.tabs-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.config-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  ::v-deep .el-tabs__header {
    margin: 0;
    padding: 0 20px;
    background: #f8fafc;
  }
  
  ::v-deep .el-tabs__content {
    flex: 1;
    padding: 0;
  }
  
  ::v-deep .el-tab-pane {
    height: 100%;
  }
}

.tab-content {
  padding: 24px;
  height: 100%;
  overflow-y: auto;
}

.tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
  
  h4 {
    margin: 0;
    color: #2d3748;
    font-weight: 600;
  }
}

.config-form {
  max-width: 600px;
}

.form-item {
  margin-bottom: 28px;
  
  ::v-deep .el-form-item__label {
    color: #4a5568;
    font-weight: 600;
    padding-right: 20px;
    font-size: 14px;
  }
}

.form-select {
  width: 100%;
}

.checkbox-item {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-icon {
  color: #a0aec0;
  cursor: help;
  
  &:hover {
    color: #667eea;
  }
}

.duration-input {
  width: 200px;
}

.value-type-item {
  ::v-deep .el-form-item__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.moment-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.moment-input-group {
  display: flex;
  align-items: center;
  gap: 16px;
  
  label {
    font-weight: 500;
    color: #4a5568;
    min-width: 80px;
  }
}

.time-slider {
  flex: 1;
  max-width: 300px;
}

.time-display {
  font-weight: 600;
  color: #667eea;
  min-width: 60px;
  text-align: center;
}

.input-tip {
  color: #a0aec0;
  font-size: 12px;
  margin: 8px 0 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  
  i {
    font-size: 14px;
  }
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

// 空状态样式
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fafafa 0%, #f0f4f8 100%);
}

.empty-content {
  text-align: center;
  color: #a0aec0;
  
  h3 {
    margin: 20px 0 8px 0;
    color: #718096;
    font-weight: 600;
  }
  
  p {
    margin: 0 0 20px 0;
    font-size: 14px;
  }
}

.empty-icon-wrapper {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  
  i {
    font-size: 40px;
    color: #a0aec0;
  }
}

// 底部按钮样式
.dialog-footer {
  padding: 20px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left, .footer-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cancel-btn {
  background: white;
  border: 2px solid #e2e8f0;
  color: #718096;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  
  &:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-1px);
  }
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 10px 28px;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
  
  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }
  
  &:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
    
    &:hover {
      transform: none;
    }
  }
}

// 动画效果
.el-fade-in-enter-active {
  transition: all 0.5s ease;
}

.el-fade-in-leave-active {
  transition: all 0.3s ease;
}

.el-fade-in-enter,
.el-fade-in-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

// 响应式设计
@media (max-width: 1200px) {
  .dialog-container {
    flex-direction: column;
  }
  
  .left-panel {
    width: 100%;
    height: 200px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
}
</style>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      searchText: '',
      saving: false,
      dialogVisible: this.visible,
      dialogData1:[
        {linK_POINT_NAME:'1111'},
        {linK_POINT_NAME:'222'},
        {linK_POINT_NAME:'3333'}
      ],
      dialogDataValue1:[
        {linK_POINT_NAME:'1111'},
        {linK_POINT_NAME:'222'},
        {linK_POINT_NAME:'3333'}],
      compList:[{
        lable:'34343',
        id:1
      }],
      filteredPointTreeList:[{
        lable:'11111111',
        id:1,
        children:[{
        lable:'222222222222',
        id:2,
        children:[]
      }]
      }],
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    },
  },
  computed: {
    filteredPointTreeList() {
      if (!this.searchText) return this.pointTreeList;
      return this.pointTreeList.filter(node => 
        node.lable.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.lable.toLowerCase().includes(value.toLowerCase());
    },
    
    isPointConfigured(data) {
      return this.dialogData1.some(item => item.linK_POINT_NAME === data.lable);
    },
    
    generateTabLabel(item) {
      return `${item.linK_POINT_NAME}${item.comp ? ` (${item.comp})` : ''}`;
    },
    
    getConfigStatusType(item) {
      if (!item.comp) return 'warning';
      if (item.valuetype === 0 && (item.moment < 0 || item.moment > 23)) return 'danger';
      return 'success';
    },
    
    getConfigStatusText(item) {
      if (!item.comp) return '未完成';
      if (item.valuetype === 0 && (item.moment < 0 || item.moment > 23)) return '配置错误';
      return '已完成';
    },
    
    handleCompChange(item) {
      this.$forceUpdate();
    },
    
    handleCannulChange(item) {
      if (item.cannul === 0) {
        item.duration = null;
      }
    },
    
    handleValueTypeChange(item) {
      if (item.valuetype !== 0) {
        item.moment = 0;
      }
    },
    
    removeCurrentTab(item) {
      const index = this.dialogData1.findIndex(d => d.linK_POINT_NAME === item.linK_POINT_NAME);
      if (index !== -1) {
        this.removeDialogTab1(item.linK_POINT_NAME);
      }
    },
    
    validateConfig(item) {
      // 配置验证逻辑
      const errors = [];
      if (!item.comp) errors.push('请选择分量');
      if (item.cannul === 1 && (!item.duration || item.duration < 1)) {
        errors.push('请输入有效的数据范围');
      }
      if (item.valuetype === 0 && (item.moment < 0 || item.moment > 23)) {
        errors.push('时刻必须在0-23之间');
      }
      
      if (errors.length > 0) {
        this.$message.warning(errors.join('，'));
      } else {
        this.$message.success('配置验证通过');
      }
    },
    
    refreshPointList() {
      this.$message.info('刷新测点列表');
      // 实际刷新逻辑
    },
    
    clearAllConfigs() {
      this.$confirm('确定要清除所有配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogData1 = [];
        this.dialogDataValue1 = '';
        this.$message.success('已清除所有配置');
      });
    },
    
    focusOnSearch() {
      this.$nextTick(() => {
        const searchInput = this.$el.querySelector('.search-input input');
        if (searchInput) searchInput.focus();
      });
    },
    
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        this.focusOnSearch();
      }
    },
    handleCancelList1(){

    },
    removeDialogTab1(){

    },
    handlePointTreeClick(){

    },
    handleSaveList1(){

    }
  }
}
</script>